<template>
	<view class="appointment">
		<view class="reservation-list" v-for="item in reservationListArr" :key="item.id">
			<view>
				<view style="line-height: 60rpx;">业务大厅：{{ item.officename }}</view>
				<view style="line-height: 60rpx;">业务类型：{{ item.servicename }}</view>
				<view style="line-height: 60rpx;">预约时间：{{ item.pre_book_time_a && item.pre_book_time_a.substr(0, 16) }}</view>
			</view>
			<view style="margin-top: 20rpx">
				<u-button @click="handleOpenreservationDetail(item)" type="primary" text="查看详情" plain icon="arrow-right-double"></u-button>
			</view>
		</view>
		<view class="no-message" v-if="reservationListArr.length === 0">
			暂无预约记录
		</view>
	</view>
</template>

<script>
	import { reservationList } from '../utils/methods.js'
	export default {
		onShareAppMessage(res) {
			return {
			  title: '石家庄不动产中心',
			  path: '/pages/index'
			}
		},
		onShow() {
			this.handleGetReservationList()
		},
		data() {
			return {
				reservationListArr: [],
			};
		},
		methods: {
			handleGetReservationList() {
				reservationList().then(res => {
					if(res.data.code === 0) {
						this.reservationListArr = res.data.data
					}
				})
			},
			handleOpenreservationDetail(item) {
				uni.navigateTo({
					url: `/pages/reservation_detail?id=${item.id}`
				})
			},
		},
		mounted() {
			this.handleGetReservationList()
			
		}
	}
</script>

<style lang="less">
.appointment {
	padding: 40rpx;
	box-sizing: border-box;
	.no-message {
		width: 100%;
		text-align: center;
		font-weight: 600;
		padding: 40rpx;
	}
	.reservation-list {
		box-sizing: border-box;
		border: 1px solid #f3f3f3;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.popup-content {
		width: 600rpx;
		height: 900rpx;
		overflow: hidden;
		.title {
			height: 80rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 800;
			padding: 12rpx;
			border-bottom: 1px solid #f3f3f3;
			box-sizing: border-box;
		}
		.text {
			height: 700rpx;
			padding: 40rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;
		}
		.btn-box {
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			padding: 20rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center; 
		}
	}
}
</style>
